<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="Cache-Control" content="private">
		<meta content="telephone=no,email=no" name="format-detection">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta http-equiv="Access-Control-Allow-Origin" content="*" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>银行卡管理</title>
		
		<link rel="stylesheet" href="./css/bootstrap/css/bootstrap.css">
		<script src="./js/lib/rem.js"></script>
		<script src="./js/lib/jquery-3.3.1.min.js"></script>
		<script src="./js/lib/common.js"></script>
	</head>
	<style>
		.bank{width:100%;height:100%;background:#fff;position:fixed;}
		.head{width:100%;height:1rem;line-height:1rem;text-align:center;background:#0c5dac;position:relative}
		.head-back{width:20%;height:1rem;position:absolute;left:0;top:0;display:flex;flex-direction:row;align-items:center;justify-content:center;}
		.head-back > i.back{width:0.4rem;height:0.4rem;display:inline-block;background:url('./img/icons/left.png') no-repeat;background-size:0.4rem;}
		.head-back > span{font-size:0.3rem;color:#fff;}
		.head-title{width:100%;height:1rem;line-height:1rem;text-align:center;background:#0c5dac;}
		.head-title > span{font-size:0.34rem;color:#fff;}
		
		.add-bank{width:15%;height:1rem;position:absolute;right:0;top:0;display:flex;flex-direction:row;align-items:center;justify-content:center;}
		.add-bank > i.add{width:0.4rem;height:0.4rem;background:url('./img/icons/add.png') no-repeat;background-size:0.4rem;}

		.bank-list{width:100%;height:calc(100% - 1.2rem);margin-top:0.2rem;}
		.bank-item{width:100%;height:1.2rem;margin-bottom:0.2rem;border-bottom:0.02rem solid #ccc;display:flex;flex-direction:row;}
		.bank-img{width:25%;height:1.2rem;line-height:1.2rem;text-align:center;}
		.bank-img > img{width:0.7rem;height:0.7rem;}
		.bank-infor{width:60%;height:1.2rem;display:flex;flex-direction:column;justify-content:center;}
		.bank-infor > span{color:#222;font-size:0.32rem;}
		.bank-infor > p{color:#999;font-size:0.26rem;margin:0 !important;}
	</style>
	<body>
		<div class="bank">
			<div class="head">
				<div class="head-back" onClick='javascript:history.go(-1);'>
					<i class="back"></i>
					<span>返回</span>
				</div>
				<div class="head-title">
					<span>银行卡管理</span>
				</div>
				<a href="./bank-add.html" class="add-bank" >
					<i class="add"></i>
				</a>
			</div>
			
			<div class="bank-list">
				<div class="bank-item">
					<div class="bank-img">
						<img src="./img/bank-zg.png" alt="">
					</div>
					<div class="bank-infor">
						<span>中国银行</span>
						<p>尾号3456 储蓄卡</p>
					</div>
				</div>
				
				<div class="bank-item">
					<div class="bank-img">
						<img src="./img/bank-js.png" alt="">
					</div>
					<div class="bank-infor">
						<span>建设银行</span>
						<p>尾号3456 储蓄卡</p>
					</div>
				</div>
				
				<div class="bank-item">
					<div class="bank-img">
						<img src="./img/bank-ny.png" alt="">
					</div>
					<div class="bank-infor">
						<span>农业银行</span>
						<p>尾号3456 储蓄卡</p>
					</div>
				</div>
			
			</div>
		</div>
	</body>
</html>
